<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;

    }

    a {
        color: black;
        text-decoration: none;
    }

    :root {
        --themcolor: #3e3d43;
        --them2color: #ee2737
    }

    #app {
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: 70px 1fr;
        grid-template-areas:
            "a b"
            "a c"
        ;
    }

    aside {
        grid-area: a;
        background-color: var(--themcolor);

    }

    header {
        grid-area: b;
        background-color: var(--them2color);
    }

    main {
        grid-area: c;
    }

    .table1 {
        margin: 0 auto;
        border-collapse: collapse;
        border-spacing: 0;
        /* border: 1px solid black; */
        text-align: center;
    }

    .table1 tr {
        height: 30px;
    }

    .table1 td {
        padding: 10px 30px;
        border: 1px solid black;
    }

    .table1 td img {
        width: 150px;
        height: 150px;
        object-fit: cover;
    }

    .dete {
        color: #1b6ef3;
        cursor: pointer;
        /* text-decoration: underline; */
    }

    .dete:hover {
        text-decoration: underline;
    }

    .leftasider li {
        height: 60px;
        line-height: 60px;
        font-size: 25px;
    }

    .leftasider li:hover {
        background-color: #18171a;
        color: #fff;
    }

    .leftasider li {
        height: 60px;
        line-height: 60px;
        font-size: 25px;
    }

    .leftasider li:hover {
        background-color: #18171a;
        color: #fff;
    }

    li.select {
        background-color: #18171a;
        color: #fff;
    }
</style>

<body>
    <div class="" id="app">
        <aside>
            <h1>{{name}}</h1>
            <ul class="leftasider">
                <a v-for="item in  link" :href="item.link">
                    <li :class="{  select : item.link == path }"> {{item.name}}</li>
                </a>
                <!--  循环 link 这个数据   item表示每一个值 -->
            </ul>

        </aside>
        <header></header>
        <main>

            <table class="table1">
                <thead>
                    <tr>
                        <td>id</td>
                        <td>小说</td>
                        <td>作者</td>
                        <td>封面</td>
                        <td>创建时间</td>
                        <td>更新时间</td>

                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item,index in  novellist">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.author}}</td>
                        <td> <img :src="item.cover" alt=""> </td>
                        <td>{{item.createTime | formatTime}}</td>
                        <td>{{item.updateTime | formatTime}}</td>

                        <td> <span @click="delet(item.id,index)" class="dete">恢复</span> </td>
                    </tr>
                </tbody>
            </table>

        </main>
    </div>
</body>
<script src="/static/vue.js"></script>
<script src="/static/ajax.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            path: "/",
            name: "明德阅读平台333",
            link: [
                { name: "首页", link: "/" },
                { name: "添加小说", link: "/add" },
                { name: "回收站", link: "/huishou" },
                { name: "用户列表", link: "/user" },
            ],
            novellist: []
        },
        methods: {
            async delet(id, index) {
                console.log(id);
                let result = await ajax({
                    url: "/noveldelete",
                    methods: "post",
                    data: {
                        id: id,
                        status: false
                    }
                })
                //  成功后, 要删除当前的这一行
                console.log("删除的下标", index);
                this.novellist.splice(index, 1) // 从下标几开始删除   , 删除几个  

            },
            async fn2(id, status) {
                console.log(id, status);
                //  发生请求 通知 服务器修改数据库
                let result = await ajax({
                    url: "/novelchange",
                    methods: "post",
                    data: {
                        id: id,
                        online: status
                    }
                })

                console.log("结果", result);

            }
        },
        //  请求在创建后发生, 因为得到数据 可以改变novellist
        beforeCreate() {
            //  发生请求 基本得到数据也无法更改 的data 中novellist
            //  此刻 Vue实例是没有 中novellist
        },
        filters: {
            //  格式化时间 
            formatTime(time) {
                let t = new Date(time)
                return t.getFullYear() + "/" + (t.getMonth() + 1) + "/" + t.getDate() + "   " + t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds()
            }
        },
        async created() {
            console.log(location.pathname);
            this.path = location.pathname
            let result = await ajax({
                url: "/getdelete",
                methods: "post",
            })
            console.log("获得到数据", result.data);
            this.novellist = result.data

        },
    })
</script>

</html>